<template>
  <el-tabs v-model="pfactiveName" @tab-click="pfhandleClick">
    <el-tab-pane label="派费对账汇总" name="pfone">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="pfhzform" :model="pfhzform" label-width="100px" class="flex-start ">
              <el-form-item label="汇总维度">
                <el-select v-model="pfhzform.collectDimensionality" placeholder="请选择汇总维度" style="width:286px" @change="pfhzhd">
                  <el-option label="日汇总" value="1" />
                  <el-option label="月汇总" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="时间范围" prop="pfhztime">
                <el-date-picker v-show="pfhzform.collectDimensionality==='2'" v-model="pfhzform.month" value-format="yyyy-MM" type="month" placeholder="选择月" style="width: 400px;" @change="pfhzmonth" />
                <el-date-picker v-show="pfhzform.collectDimensionality==='1'" v-model="pfhzform.time" value-format="yyyy-MM-dd" style="width: 400px;" type="date" placeholder="选择日期" @change="pfhzpicker" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="pfhzcx">查询</el-button>
                <elbutton :obj="pfhzform" @dj="pfhzclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="pfhzloading" :data="pfhztableData" :th="pfhzth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="pfhzform.pageDate.pageNum" :page-size="pfhzform.pageDate.pageSize" :total="pfhztotal" @size-change="pfhzhandleSizeChange" @current-change="pfhzhandleCurrentChange" />
      </div>
    </el-tab-pane>
    <el-tab-pane label="派费对账明细" name="pftwo">
      <el-row>
        <el-col :span="24">
          <div class="header">
            <el-form ref="zlform" :model="pfmxform" label-width="100px" class="flex-start ">
              <el-form-item label="单号">
                <el-input v-model="pfmxform.transportCode" placeholder="请输入单号" />
              </el-form-item>
              <el-form-item label="时间范围" prop="zltime">
                <el-date-picker v-model="pfmxform.Time" value-format="yyyy-MM-dd" style="width: 500px;" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="pfmxpicker" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="pfmxcx">查询</el-button>
                <elbutton :obj="pfmxform" @dj="pfmxclear" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div>
            <elltable ref="multipleTable" :loading="pfmxloading" :data="pfmxtableData" :th="pfmxth" :n="3" />
          </div>
        </el-col>

      </el-row>
      <div class="block" style="display: flex; justify-content: flex-end;">
        <pagination :current-page="pfmxform.pageDate.pageNum" :page-size="pfmxform.pageDate.pageSize" :total="pfmxtotal" @size-change="pfmxhandleSizeChange" @current-change="pfmxhandleCurrentChange" />
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { Getpfhztable, Getpfmxtable } from '@/api/ReconciliationCenter'
export default {
  data() {
    return {
      //   派费
      // 派费汇总
      pfactiveName: 'pfone',
      pfhztotal: 0,
      pfhzloading: false,
      pfhzform: {
        collectDimensionality: '1',
        month: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        time: ''
      },
      // 派费汇总表头
      pfhzth: [],
      //   派费汇总表格
      pfhztableData: [],

      //  派费明细
      pfmxtotal: 0,
      pfmxloading: false,
      pfmxform: {
        endTime: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        },
        startTime: '',
        transportCode: ''
      },
      // 派费明细表头
      pfmxth: [],
      //   派费明细表格
      pfmxtableData: []
    }
  },
  methods: {
    // 派费

    // 派费汇总开始

    // 派费tabs切换
    pfhandleClick(tab, event) {
      // console.log(tab, event)
    },
    // 派费汇总查询
    pfhzcx() {
      if (this.pfhzform.time === '' && this.pfhzform.month === '') {
        this.$message('请选择日期')
        return
      }
      this.pfhzonSubmit()
    },
    async pfhzonSubmit() {
      this.pfhzloading = true
      const res = await Getpfhztable(this.pfhzform)
      this.pfhzloading = false
      console.log('派费汇总', res)
      if (res.code === 200) {
        this.pfhztableData = res.data.list.data
        this.pfhztotal = res.data.list.total
        this.pfhzth = res.data.fields
      } else {
        this.pfhztableData = []
        this.pfhztotal = 0
        this.pfhzth = []
      }
    },
    // 获取派费汇总月份
    pfhzmonth(value) {
      console.log(value)
      this.pfhzform.month = value
    },
    // 获取派费汇总时间
    pfhzpicker(value) {
      console.log(value)
      this.pfhzform.time = value
    },
    // 派费汇总维度改变
    pfhzhd() {
      this.pfhzform.month = ''
      this.pfhzform.time = ''
    },
    // 派费汇总分页
    pfhzhandleSizeChange(val) {
      this.pfhzform.pageDate.pageSize = val
      this.pfhzform.pageDate.pageNum = 1
      this.pfhzcx()
    },
    pfhzhandleCurrentChange(val) {
      this.pfhzform.pageDate.pageNum = val
      this.pfhzcx()
    },

    // 派费汇总结束

    // 派费明细
    // 派费明细查询
    pfmxcx() {
      if (this.pfmxform.startTime === '') {
        this.$message('请选择日期')
        return
      }
      this.pfmxonSubmit()
    },
    async pfmxonSubmit() {
      this.pfmxloading = true
      const res = await Getpfmxtable(this.pfmxform)
      this.pfmxloading = false
      console.log('派费明细', res)
      if (res.code === 200) {
        this.pfmxtableData = res.data.list.data
        this.pfmxtotal = res.data.list.total
        this.pfmxth = res.data.fields
      } else {
        this.pfmxtableData = []
        this.pfmxtotal = 0
        this.pfmxth = []
      }
    },
    // 获取派费明细时间
    pfmxpicker(value) {
      if (value == null) {
        this.pfmxform.startTime = ''
        this.pfmxform.endTime = ''
        return
      }
      this.pfmxform.startTime = value[0]
      this.pfmxform.endTime = value[1]
    },
    // 派费明细分页
    pfmxhandleSizeChange(val) {
      this.pfmxform.pageDate.pageSize = val
      this.pfmxform.pageDate.pageNum = 1
      this.pfmxcx()
    },
    pfmxhandleCurrentChange(val) {
      this.pfmxform.pageDate.pageNum = val
      this.pfmxcx()
    },
    // 汇总重置
    pfhzclear(aaa) {
      this.pfhzform = aaa
      this.pfhzform.collectDimensionality = '1'
    },
    // 明细重置
    pfmxclear(aaa) {
      this.pfmxform = aaa
    }
  }
}
</script>
<style >
.flex-start {
  display: flex;
}
</style>
